<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="/static/js/app/workspace/mescroll/mescroll.min.css">
    <link rel="stylesheet" href="/static/js/app/workspace/common/swiper-3.3.1.min.css">
    <script src="/static/js/app/workspace/common/jquery.2.1.4.min.js"></script>
    <script src="/static/js/app/workspace/flexible.js"></script>
    <script src="/static/js/app/workspace/init.js"></script>
    <script src="/static/js/app/workspace/util.js"></script>
    <script src="/static/js/app/workspace/mescroll/mescroll.min.js"></script>
    <!--<script src="../js/mescroll/pdlist1.js"></script>-->
    <script src="/static/js/app/workspace/common/swiper-3.3.1.min.js"></script>
    <script src="/static/js/app/workspace/mescroll/mescroll.m.js"></script>
    <link rel="stylesheet" href="/static/css/app/workspace/billDetail/billDetail.css">
    <link rel="stylesheet" href="/static/css/app/workspace/billDetail/billDetail.less">
    <title>账单明细</title>
    <style>

        .scrollx-content{
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
        }
        #swiperWrapper{
            background: #eee;
        }
        .mescroll-upwarp{
            padding: 0;
        }
        ::-webkit-scrollbar {
            display: none;/*隐藏滚轮*/
        }
    </style>
</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
<div class="billDetail" class="header">
    <div id="billBar" class="scrollx mescroll-touch-x">
        <div class="bill-top scrollx-content" id="scrollxContent">
            <ul class="navigationBar nav" id="nav">
                <li i="0" data-billType="0" data-cls="all"  class="active">全部</li>
                <li i="1" data-billType="1" data-cls="video" >视频</li>
                <li i="2" data-billType="2" data-cls="gift" >礼物</li>
                <li i="3" data-billType="3" data-cls="recharge" >充值</li>
                <li i="4" data-billType="4" data-cls="putForward" >提现</li>
                <li i="5" data-billType="5" data-cls="privateLetter" >私信</li>
                <li i="6" data-billType="6" data-cls="recommendation">推荐提成</li>
            </ul>
        </div>
    </div>
</div>
<div id="swiper" class="swiper-container">
    <div class="bill-contain swiper-wrapper" id="swiperWrapper">
        <div id="mescroll0" class="swiper-slide mescroll ">
            <ul id="dataList0" class="all data-list"></ul>
        </div>
        <div id="mescroll1" class="swiper-slide mescroll ">
            <ul id="dataList1" class="video data-list"></ul>
        </div>
        <div id="mescroll2" class="swiper-slide mescroll ">
            <ul id="dataList2" class="gift data-list"></ul>
        </div>
        <div id="mescroll3" class="swiper-slide mescroll ">
            <ul id="dataList3" class="recharge data-list"></ul>
        </div>
        <div id="mescroll4" class="swiper-slide mescroll ">
            <ul id="dataList4" class="putForward data-list"></ul>
        </div>
        <div id="mescroll5" class="swiper-slide mescroll ">
            <ul id="dataList5" class="privateLetter data-list"></ul>
        </div>
        <div id="mescroll6" class="swiper-slide mescroll ">
            <ul id="dataList6" class="recommendation data-list"></ul>
        </div>
    </div>
</div>
<script type="text/javascript" charset="utf-8">
    $(function(){
        //基本初始化
        var H=window.innerHeight;
        $(".billDetail").css("height",H);
        var accessId = getParameter("x-access-id");
        var accessToken = getParameter("x-access-token");
        var databilltype=getParameter("databilltype");
        var ua = "h5";
        var defaultPage=1;
        var defaultSize=15;
        //判断参数是否都有值
        if(!(accessId && accessToken && databilltype != null && databilltype!="" && databilltype!="null")){
            $(".bill-top,.loading").hide();
            $(".bill-contain").css("margin-top",0);
            $(".bill-contain").hide();
        }
//        判断是否是测试环境还是普通账号
        $.ajax({
            url: genUrl("/customer/findCustomerInfo"),
            type: 'GET',
            contentType:"application/json",
            headers:{
                "x-access-id":accessId ,
                "x-access-token": accessToken,
                "x-ua": ua
            },
            data: {"customerId":accessId},
            dataType: 'json',
            async: false,
            success: function (res) {
                if(res.code!=0){
                    alert(res.message);
                    $(".bill-top,.loading").hide();
                    $(".bill-contain").css("margin-top",0);
                    return;

                }
                var hktc=res.data.hktc;
                if(hktc != 0){
                    databilltype=2;
                    $(".nav").find("li").hide();
                    $(".nav").find("li").removeClass("active");
                    $(".nav").find("li").eq(2).show();
                    $(".nav").find("li").eq(3).addClass("active");
                    $(".nav").find("li").eq(3).show();
                    $(".bill-contain").find("ul").eq(2).show();
                    $ (".nav>li").eq(2).css("width","4.95rem");
                    $ (".nav>li").eq(3).css("width","4.95rem");
                }
            }
        });

        /**插件写入***/
        //导航菜单
        var mescrollArr=new Array(7);//每个菜单对应一个mescroll对象
        //当前菜单下标
        var curNavIndex=0;
        //初始化首页
        mescrollArr[curNavIndex]=initMescroll(curNavIndex);
        /*初始化轮播*/
        var swiper=new Swiper('#swiper', {
            onTransitionEnd: function(swiper){
                var i=swiper.activeIndex;//轮播切换完毕的事件
                changePage(i);
            }
        });
        /*菜单点击事件*/
        $("#nav li").click(function(){
            var i=Number($(this).attr("i"));
            swiper.slideTo(i);//以轮播的方式切换列表
        });
        //模拟点击
        if(Number(databilltype) != null){
            //模拟点击事件
            $(".nav li").eq(Number(databilltype)).trigger('click');
        }
        /*切换列表*/
        function changePage(i) {
            if(curNavIndex!=i) {
                //更改列表条件
                var curNavDom;//当前菜单项
                $("#nav li").each(function(n,dom){
                    if (dom.getAttribute("i")==i) {
                        dom.classList.add("active");
                        curNavDom=dom;
                    } else{
                        dom.classList.remove("active");
                    }
                });
                //菜单项居中动画
                var scrollxContent=document.getElementById("scrollxContent");
                var star = scrollxContent.scrollLeft;//当前位置
                var end = curNavDom.offsetLeft + curNavDom.clientWidth/2 - document.body.clientWidth/2; //居中
                mescrollArr[curNavIndex].getStep(star, end, function(step,timer){
                    scrollxContent.scrollLeft=step; //从当前位置逐渐移动到中间位置,默认时长300ms
                });
                //隐藏当前回到顶部按钮
                mescrollArr[curNavIndex].hideTopBtn();
                //取出菜单所对应的mescroll对象,如果未初始化则初始化
                if(mescrollArr[i]==null){
                    mescrollArr[i]=initMescroll(i);
                }else{
                    //检查是否需要显示回到到顶按钮
                    var curMescroll=mescrollArr[i];
                    var curScrollTop=curMescroll.getScrollTop();
                    if(curScrollTop>=curMescroll.optUp.toTop.offset){
                        curMescroll.showTopBtn();
                    }else{
                        curMescroll.hideTopBtn();
                    }
                }
                //更新标记
                curNavIndex=i;
            }
        }
        /*创建MeScroll对象*/
        function initMescroll(index){
            //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
            var mescroll = new MeScroll("mescroll"+index, {
                //上拉加载的配置项
                up: {
                    callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        icon: "../img/null.png", //图标,默认null
                        tip: "暂无相关数据~" //提示
                        // btntext: "去逛逛 >", //按钮,默认""
                        // btnClick: function(){//点击按钮的回调,默认null
                        //     alert("点击了按钮,具体逻辑自行实现");
                        // }
                    },
                    clearEmptyId: "dataList"+index,
                    toTop:{ //配置回到顶部按钮
                        src : "", //默认滚动到1000px显示,可配置offset修改
                        //offset : 1000
                    },
                    isBounce:false
                }
            });
            return mescroll;
        }
        /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function getListData(page){
            //联网加载数据
            var dataIndex=curNavIndex; //记录当前联网的nav下标,防止快速切换时,联网回来curNavIndex已经改变的情况;
            getListDataFromNet(dataIndex, page.num, defaultSize, function(pageData){
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                console.log("dataIndex="+dataIndex+", curNavIndex="+curNavIndex+", page.num="+page.num+", page.size="+page.size+", pageData.length="+pageData.length);
                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //mescrollArr[dataIndex].endByPage(pageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //mescrollArr[dataIndex].endBySize(pageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
                //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                //mescrollArr[dataIndex].endSuccess(pageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                mescrollArr[dataIndex].endSuccess(pageData.length);
                //设置列表数据
                setListData(pageData,dataIndex);
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescrollArr[dataIndex].endErr();
            });
        }
        /*设置列表数据
         * pageData 当前页的数据
         * dataIndex 数据属于哪个nav */
        function setListData(pageData,dataIndex){
            console.log(pageData);
            var str="";
            var listDom=$("#dataList"+dataIndex);
            if(pageData){
                for(var i=0;i<pageData.length;i++){
                    str+='<li>';
                    str+='<div>';
                    str+='<h1>'+pageData[i].description+'</h1>';
                    str+='<i>'+getMyDate(pageData[i].createTime)+'</i>';
                    str+='</div>';
                    var cls=pageData[i].coin >0 ? "blue" : "red";
                    var coin=pageData[i].coin >0 ? "+"+pageData[i].coin :pageData[i].coin;
                    str+='<p><b class="'+cls+'">'+coin+'</b><span>花瓣</span></p>';
                    str+='</li>';
                }
                listDom.append(str);
            }else{
                console.log("数据加载失败");
            }
        }
        /*联网加载列表数据
         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
         * */
        function getListDataFromNet(curNavIndex,pageNum,pageSize,successCallback,errorCallback) {
            //延时一秒,模拟联网
            setTimeout(function () {
                $.ajax({
                    url: genUrl("/wallet/getBillList"),
                    type: 'GET',
                    contentType:"application/json",
                    headers:{
                        "x-access-id":accessId ,
                        "x-access-token": accessToken,
                        "x-ua": ua
                    },
                    data: {"page":pageNum,"size":pageSize,"billType":curNavIndex},
                    dataType: 'json',
                    async: false,
                    success: function(data){
                        var data=data.data.list;
                        var listData=data;
                        //回调
                        successCallback(listData);
                    },
                    error: errorCallback
                });
            },100)
        }

        // 时间戳转换过程
        function getMyDate(str){
            var oDate = new Date(str),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth()+1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
            return oTime;
        };
        function getzf(num){
            if(parseInt(num) < 10){
                num = '0'+num;
            }
            return num;
        }
        //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
        document.ondragstart=function() {return false;}
    });
</script>
</body>
</html>